<template>
  <div>搜索结果页面</div>

  <!-- 商品列表 -->
  <!-- 商品列表 -->
  <!-- 设置垂直间距 -->
  <van-row :gutter="[20, 20]" class="list">
    <!-- 使用组件 -->
    <ProductItem
      v-for="item in listArr"
      :key="item.id"
      :item="item"
      @click="$router.push('/detail?id=' + item.proid)"
    >
    </ProductItem>
  </van-row>
</template>
<script>
// 引入组件-注册苏州
import ProductItem from "@/components/ProductItem.vue";

import { productSearch } from "@/api/product";

export default {
  components: { ProductItem },
  data() {
    return {
      listArr: [],
    };
  },
  methods: {},
  async mounted() {
    //获取搜索的字符串--》发起搜索请求
    console.log(this.$route.query.word);

    let keyword = this.$route.query.word;
    //这里不要关系 地址和参数名
    let r = await productSearch(keyword);

    console.log(r.data);
    //保存搜索结果数组
    this.listArr = r.data.data;
  },
};
</script>
<style lang="css" scoped>
.list {
  width: 355px;
  margin: 0 auto;
}
</style>
